import { getOfflinePlanDetail } from '@/api/OfflineStudy';
import { getUpDownDay } from '@/utils';
import { Descriptions, Spin, Table } from 'antd';
import { isEmpty } from 'lodash-es';
import { useEffect, useState } from 'react';

const DRAWERWIDTH = 680;
const weekList = ['日', '一', '二', '三', '四', '五', '六'];
function StudyOfflineDetail(props: { planCourseId: string }) {
  const { planCourseId } = props;
  const [loading, setLoading] = useState(false);
  const [planDetail, setPlanDetail] = useState<Record<string, any>>();
  useEffect(() => {
    if (!planCourseId) return;
    setLoading(true);
    getOfflinePlanDetail(planCourseId)
      .then((res: any) => {
        const { data } = res;
        const { entList, trainTimeVoList, noTrainTimeVoList, specialTrainTimeVoList } = data;

        const detail = Object.assign({}, data);
        detail.entListArr = entList?.map((el: any) => el.entName);
        (detail.trainTimeDtoList = trainTimeVoList.map((el: any) => {
          return {
            value: el.week,
            startTrainTime: el.startTrainTime.slice(0, 5),
            endTrainTime: el.endTrainTime.slice(0, 5),
          };
        })),
          (detail.noTrainTimeDtoList = [...noTrainTimeVoList]);
        detail.specialTrainTimeDtoList = specialTrainTimeVoList.map((el: any) => {
          return {
            trainTime: el.startSpecialTrainTime.slice(0, 10),
            startTime: el.startSpecialTrainTime.slice(11, 16),
            endTime: el.endSpecialTrainTime.slice(11, 16),
          };
        });
        setPlanDetail(detail);
      })
      .catch((err: any) => {
        console.log('--StudyPlanDetail--getFixedStudyPlanDetail/getCircleStudyPlanDetail--err--:', err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [planCourseId]);
  const columns1 = [
    {
      title: '培训日',
      dataIndex: 'studyday',
      key: 'studyday',
      width: 300,
      render: (_: any, record: any) => <div>周{weekList[record.value]}</div>,
    },
    {
      title: '时间',
      dataIndex: 'studyTime',
      key: 'studyTime',
      width: 400,
      render: (_: any, record: any) => (
        <div>
          {getUpDownDay(record.startTrainTime, 1)}
          {record.startTrainTime}——{getUpDownDay(record.endTrainTime, 1)}
          {record.endTrainTime}
        </div>
      ),
    },
  ];
  const columns2 = [
    {
      title: '日期',
      dataIndex: 'studyday',
      key: 'studyday',
      width: 300,
      render: (_: any, record: any) => <div>{record.noTrainTime}</div>,
    },
    {
      title: '时间',
      dataIndex: 'studyTime',
      key: 'studyTime',
      width: 400,
      render: (_: any, record: any) => <div>——</div>,
    },
  ];
  const columns3 = [
    {
      title: '日期',
      dataIndex: 'studyday',
      key: 'studyday',
      width: 300,
      render: (_: any, record: any) => <div>{record.trainTime}</div>,
    },
    {
      title: '时间',
      dataIndex: 'studyTime',
      key: 'studyTime',
      width: 400,
      render: (_: any, record: any) => (
        <div>
          {getUpDownDay(record.startTime, 1)}
          {record.startTime}——{getUpDownDay(record.endTime, 1)}
          {record.endTime}
        </div>
      ),
    },
  ];
  return (
    <>
      {!isEmpty(planDetail) && (
        <Spin spinning={loading}>
          <Descriptions
            title="基本信息"
            labelStyle={{ width: 140, justifyContent: 'flex-end' }}
            column={2}
            className="ym_descriptions"
          >
            <Descriptions.Item label="学习模式" span={2}>
              线下培训
            </Descriptions.Item>
            {/* <Descriptions.Item label="类型" span={1}>
              固定时间
            </Descriptions.Item> */}
            <Descriptions.Item label="培训位置" span={2}>
              {planDetail.trainAddress}
            </Descriptions.Item>
            <Descriptions.Item label="培训名称" span={2}>
              {planDetail.title}
            </Descriptions.Item>
            <Descriptions.Item label="学习对象" span={2}>
              {/* {planDetail.entListArr.join('，')} */}
              司机
            </Descriptions.Item>
          </Descriptions>
          <Descriptions
            title="规则设置"
            labelStyle={{ width: 140, justifyContent: 'flex-end' }}
            column={2}
            className="ym_descriptions"
          >
            <Descriptions.Item label="关联信息" span={1}>
              {planDetail.linkInfo == 1
                ? '无'
                : planDetail.linkInfo == 2
                ? '安全码'
                : planDetail.linkInfo == 3
                ? '学习卡'
                : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="是否需要签到/退" span={1}>
              {planDetail.signRule == 1
                ? '不需要签到/签退'
                : planDetail.signRule == 2
                ? '只需要签到1次'
                : planDetail.signRule == 3
                ? '需要签到和签退'
                : '-'}
            </Descriptions.Item>
            {planDetail.signRule == 2 || planDetail.signRule == 3 ? (
              <>
                <Descriptions.Item label="签到地点" span={2}>
                  {planDetail.signAddress}
                </Descriptions.Item>
                <Descriptions.Item label="签到范围" span={2}>
                  {planDetail.scope}米
                </Descriptions.Item>
              </>
            ) : null}

            {planDetail.signRule == 3 ? (
              <>
                <Descriptions.Item label="签退距签到最少时间" span={2}>
                  {planDetail.intervalTime}&nbsp;&nbsp;{planDetail.intervalType == 1 ? '分钟' : '小时'}
                </Descriptions.Item>
              </>
            ) : null}

            {planDetail.signRule == 2 || planDetail.signRule == 3 ? (
              <>
                <Descriptions.Item label="是否需要人脸识别" span={2}>
                  {planDetail.isFace == 1 ? '是' : '否'}
                </Descriptions.Item>
              </>
            ) : null}
          </Descriptions>
          <Descriptions
            title="培训时间"
            labelStyle={{ width: 140, justifyContent: 'flex-end' }}
            column={2}
            className="ym_descriptions"
          >
            <Descriptions.Item label="培训日期与时间" span={2}>
              <Table key={1} columns={columns1} dataSource={planDetail.trainTimeDtoList} pagination={false} />
            </Descriptions.Item>
            <Descriptions.Item label="特殊无需培训日" span={2}>
              <Table key={2} columns={columns2} dataSource={planDetail.noTrainTimeDtoList} pagination={false} />
            </Descriptions.Item>
            <Descriptions.Item label="特殊培训日" span={2}>
              <Table key={3} columns={columns3} dataSource={planDetail.specialTrainTimeDtoList} pagination={false} />
            </Descriptions.Item>
          </Descriptions>
        </Spin>
      )}
    </>
  );
}
export default StudyOfflineDetail;
